import React from 'react'
import Mytab from './Mytab'
import Area from './Area';
import './css/publish.css'
import { Cascader,Modal } from 'antd';
import { getConfigController } from './actionCreators';
import { connect } from 'react-redux'

const options = [
    {
        value: '河北',
        label: '河北',
        children: [
            {
                value: '石家庄',
                label: '石家庄',
                children: [
                    {
                        value: '长安区',
                        label: '长安区',
                    },
                ],
            },
        ],
    },
    {
        value: '江苏',
        label: '江苏',
        children: [
            {
                value: '南京',
                label: '南京',
                children: [
                    {
                        value: '啊啊啊',
                        label: '啊啊啊',
                    },
                ],
            },
        ],
    },
];
class Publish extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            projects: [],
            ensure: '',
            visible: false
        }
        this.checkboxProjects = this.checkboxProjects.bind(this)
        this.checkboxEnsure = this.checkboxEnsure.bind(this)
    }
    componentDidMount() {
        this.props.dispatch(getConfigController())
    }
    change = (type, e) => {
        this.setState({
            [type]: e.target.value
        })
    }
    checkboxProjects(e) {
        let item = e.target.value;
        let items = this.state.projects.slice();
        let index = items.indexOf(item);
        index === -1 ? items.push(item) : items.splice(index, 1);
        this.setState({ projects: items });
    }
    checkboxEnsure(e) {
        let item = e.target.value;
        let items = this.state.ensure;
        items === '' ? items += item : items = '';
        this.setState({ ensure: items });
    }
    ensureChange(e) {
        let value = e.target.value
        if (this.state.ensure === '') {
            this.setState({ ensure: value })
        }
        else {
            this.setState({ ensure: '' })
        }
    }
    publish = () => {
        console.log('submit:', this.state);
        fetch('/studentInfoController/saveStudentInfo', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'dataType': "json"
            },
            body: JSON.stringify({
                area: '新华区',
                city: '石家庄市',
                sex: this.state.sex,
                grade: this.state.grade,
                price: this.state.infofee,
                remarke: this.state.refundPromised,
                name: this.state.parentName,
                phone: this.state.parentPhone,
                teacherOtherRequire: this.state.situation,
                teacherSubject: this.state.projects.toString(),
                teacherTime: this.state.time
            })
        })
            .then(res => res.json())
            .then(res => {
                console.log(res)
                this.setState({visible:true})
            })
    }
    handleCancel = () => {
        this.setState({ visible: false });
    }
    handleUpdate = () => {
        this.setState({ visible: false });
        this.props.history.push('/')
    }
    render() {
        return (
            <div>
                <Modal okText='确定'
                    visible={this.state.visible}
                    onOk={this.handleUpdate} onCancel={this.handleCancel}
                >
                    发布成功
                </Modal>
                <div className='position'>
                    <Cascader
                        bordered={false}
                        options={options}
                        onChange={this.onChange}
                        placeholder="请选择位置"
                        className='publish-area'
                    />
                </div>
                <div className='pub-city'>城市：</div>
                <div className='pub-area'>区域：</div>
                <div className='pub-grade'>
                    年级：
                    <select onBlur={(e) => this.change("grade", e)}>
                        {
                            this.props.class.map((item) => (
                                <option name="grade" value={item.id}>{item.configName}</option>
                            ))
                        }
                    </select>
                </div>
                <div className='pub-sex'>
                    性别：
                    <select onBlur={(e) => this.change("sex", e)}>
                        {
                            this.props.sex.map((item) => (
                                <option name="sex" value={item.id}>{item.configName}</option>
                            ))
                        }
                    </select>
                </div>
                <div className='pub-subject'>
                    <div className='kemu'>科目：</div>
                    <div className='subject-list'>
                        {
                            this.props.subject.map((item) => (
                                <div>
                                    <input 
                                        name="subject" 
                                        type="checkbox" 
                                        onChange={this.checkboxProjects} 
                                        value={item.id} 
                                    />
                                    {item.configName}
                                </div>
                            ))
                        }
                        
                    </div>
                </div>
                <div className='class-time'>
                    授课时间：
                    <input type='text' className='pub-time-content' onBlur={(e) => this.change("time", e)}></input>
                </div>
                <div className='class-time'>
                    孩子情况及老师要求：
                    <textarea className='baby' rows="4" cols="20" onBlur={(e) => this.change("situation", e)}></textarea>
                </div>
                <div className='infofee'>
                    信息费：
                    <input type='text' className='fee' onBlur={(e) => this.change("infofee", e)}></input>元（不直接显示）
                </div>
                {/* <div className='order-state'>
                    可拍状态设置：
                    <input type='radio' name='order' onBlur={(e) => this.change("order", e)} value='order-yes' className='order-radio' />可以直接拍单
                    <input type='radio' name='order' onBlur={(e) => this.change("order", e)} value='order-uncertain' className='order-radio' />沟通后再设为可拍
                </div> */}
                <div className='parent'>家长联系电话：<input type='text' onBlur={(e) => this.change("parentPhone", e)} /></div>
                <div className='parent'>家长称呼：<input type='text' onBlur={(e) => this.change("parentName", e)} /></div>
                <div className='other'>其他说明：<input type='text' onBlur={(e) => this.change("other", e)} /></div>

                <div className='accept'>
                    <input type='checkbox' name='accept' value='accept' onChange={this.checkboxEnsure} />
                    我保证遵守我的退费承诺，如果出现纠纷愿意接受平台的裁定
                </div>

                <div className='refund-promised'>
                    我的退费承诺：
                    <textarea className='promise-content' rows="6" cols="20" onBlur={(e) => this.change("refundPromised", e)}></textarea>
                </div>
                <div className='remark'>
                    <div>您当前 接单好评率为：98% &nbsp;发单好评率为：96%</div>
                    <div className='remark-content'>温馨提示：高分值的好评率是无比珍贵的，是您诚信守约的标识，有助您快速的完成订单，请加倍维护哦。</div>
                </div>
                <div className='publish' onClick={this.publish}>发布</div>
                <div className='bottom'></div>
                <Mytab />
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    class: state.configClass,
    sex: state.sex,
    subject: state.subject
})

export default connect(mapStateToProps)(Publish)
